<template>
 <view class="context">
 		<view class="status_bar">
 		</view>
 		<view class="tab">
 			<tab :data="tabData"></tab>
 			<other :data="subData" style="margin-top: 30rpx;"></other>
 		</view>
 		<!-- 组件 -->
 		<!-- 算力购买  -->
 		<view class="calculation" v-show="true">
 			<view class="box">
 				<view class="box-item">
 					<view class="box-item-head">
 						<view class="item-head-icon">
 							<image src="/static/ICON_BTC21.png"></image>
 						</view>
 						<text class="item-head-title">FIL云算力</text>
 					</view>
 					<view class="box-item-info">
 						<view class="item-info-content">
 							<text>算力类型</text>
 							<text>2021.03.26</text>
 						</view>
 						<view class="item-info-content">
 							<text>本批剩余</text>
 							<text>1.00TB</text>
 						</view>
 						<view class="item-info-content">
 							<text>算力大小</text>
 							<text>2.8367000</text>
 						</view>
 						<view class="item-info-content">
 							<text>预计日收益</text>
 							<text>2.8368000</text>
 						</view>
 						<view class="item-info-content">
 							<text>合约周期</text>
 							<text>2.8368000</text>
 						</view>
 						<view class="item-info-content">
 							<text>管理费</text>
 							<text>2.8368000</text>
 						</view>
 						<view class="item-info-content">
 							<text>电费</text>
 							<text>2.8368000</text>
 						</view>
 						<view class="item-info-content">
 							<text>开挖时间</text>
 							<text>2.8368000</text>
 						</view>
 						<view class="item-info-content">
 							<text>数量</text>
 							<text>2.8368000</text>
 						</view>
 					</view>
 				</view>
 			</view>
 			<view class="agreen">
 				<view class="contact">
 					<radio :checked="show" @click="isRadio"></radio>
 					<view>我已阅读并同意<text style="color: #2A96EE;font-weight: bold;">《云算力合同》</text></view>
 				</view>
 				<view class="readme" style="color: #2A96EE;font-weight: bold;">《产品说明》</view>
 			</view>
 		</view>
 		<!-- 质押赚币  -->
 		<view class="pledge" v-show="false">
 			<view class="box">
 				<view class="box-head">
 					<view class="box-head-tag">FIL质押</view>
 					<text>360天</text>
 				</view>
 				<view class="box-content">
 					<view class="box-content-race">18.8%</view>
 					<view class="box-content-info">预计年化收益</view>
 				</view>
 			</view>
 			<view class="payment">
 				<view class="pay-head">
 					<view class="pay-head-left">付款方式</view>
 					<view class="pay-head-right">
 						<image src="/static/ICON_BTC2(1).png"></image>
 						<text>FIL</text>
 					</view>
 				</view>
 				<view class="pay-input">
 					<u-input placeholder="输入金额（最低10FIL起）..."></u-input>
 				</view>
 				<view class="pay-info">当前可用FIL：0.511197</view>
 			</view>
 			<view class="agreen">
 				<radio :checked="show" @click="isRadio"></radio>
 				<view>我已阅读并同意<text style="color: #2A96EE;font-weight: bold;">《云算力合同》</text></view>
 			</view>
 		</view>
 		<!-- 权益转让 -->
 		<view class="change" v-show="false">
 			<view class="box">
 				<view class="box-item">
 					<view class="item-phone">158******62</view>
 					<view class="item-title">IPFS云算力</view>
 					<view class="item-content">
 						<view class="item-content-left">
 							<view class="content-item">
 								<text class="content-item-title">矿机算力：</text>
 								<text>2TB</text>
 							</view>
 							<view class="content-item">
 								<text class="content-item-title">剩余天数：</text>
 								<text>360</text>
 							</view>
 							<view class="content-item">
 								<text class="content-item-title">转让价格：</text>
 								<text>720</text>
 							</view>
 						</view>
 						<view class="item-content-right">
 								<button class="buy">购买</button>
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		<button class="submit" v-show="true" @click="toOthers('buy')">{{btnTxt}}</button>
 	</view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import ipfsPage from "./compontent/ipfsPage";
import c2cPage from "./compontent/c2cPage";
import suanlibaoPage from "./compontent/suanlibaoPage";
import tab from "./w-tab/w-tab";
import other from "./w-tab-other/w-tab-other";
export default {
  components: {
    ipfsPage,
    c2cPage,
    suanlibaoPage,
    other,
    tab
  },
  data() {
    return {
      isLoading: false,
      navIndex: 0,
      show:false,
      btnTxt: "立即购买",
      tabData: [{
      		name: "算力购买"
      	},
      	{
      		name: "质押赚币"
      	},
      	{
      		name: "权益转让"
      	}
      ],
      subData: [{
      		name: "IPFS"
      	},
      	{
      		name: "BTC"
      	},
      	{
      		name: "ETH"
      	}
      ]
    };
  },
  methods: {
    ...mapActions("mf/shop", [
      "loadGoodsList",
      "loadOrderMarket",
      "loadSuanlibaoList",
    ]),
    navChange(index) {
      console.log(index);
      this.navIndex = index;
    },
    isRadio(){
    	this.show = !this.show
    },
    toOthers(str){
    		uni.navigateTo({
    			url:"/pages/mf/shop/orderPay"
    		})
    }
  },
  computed: {
    ...mapGetters("mf/shop", ["goodsList", "orderMarket", "suanlibaoList"]),
    marketNav() {
      return [
        "IPFS",
        this.$t("mf.shop.zhiyabao"),
        this.$t("mf.shop.quanyizhuanrang"),
      ];
    },
  },
  async onShow() {
    this.isLoading = true;
    await this.loadGoodsList();
    await this.loadOrderMarket();
    await this.loadSuanlibaoList();
    this.isLoading = false;
  },
  onReachBottom() {
    if (this.navIndex != 2) {
      return;
    }
    console.log("/??");
    //避免多次触发
    if (
      this.orderMarket.has_next_page &&
      !this.loading["mf.shop.order_market"]
    ) {
      this.loadOrderMarket({
        page: this.orderMarket.current_page + 1,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}
	.tab {
		width: 702rpx;
		margin: 20rpx auto;
	}
	// 算力购买
	.calculation{
		margin-top: 35rpx;
		.agreen{
			width: 702rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;
			.contact{
				display: flex;
				align-items: center;
			}
		}
	}

	.box {
		width: 702rpx;
		margin: 0 auto;

		.box-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.box-item-head {
				display: flex;
				align-items: center;

				.item-head-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.box-item-info {
		margin-top: 20rpx;

		.item-info-content {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	// 质押赚币
	.pledge{
		width: 702rpx;
		margin: 20rpx auto;
		.box{
			background-color: #fff;
			padding: 25rpx;
		}
		.agreen{
			width: 702rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			color: #999;
			font-size: 24rpx;
		}
	}
	.box-content{
		text-align: center;
		.box-content-race{
			color: #F15945;
			font-size: 60rpx;
			font-weight: bold;
		}
		.box-content-info{
			color: #999999;
			font-size: 24rpx;
		}
	}

	.payment{
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		.pay-head{
			display: flex;
			justify-content: space-between;
			.pay-head-right{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.pay-input{
		margin: 35rpx auto;
	}

	.pay-info{
		color: #999999;
		font-size: 24rpx;
	}

	// 权益转让
	.change{
		.item-title{
			font-size: 32rpx;
			margin: 20rpx auto;
		}
	}

	.item-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content-item{
			margin-top: 7rpx;
		}
	}
	.box{
		.box-head{
			display: flex;
			align-items: center;
			.box-head-tag{
				width: 160rpx;
				height: 48rpx;
				background: #FF8000;
				border-radius: 4rpx;
				font-size: 32rpx;
				text-align: center;
				color: #fff;
				margin-right: 10rpx;
			}
		}
	}
	.submit{
		width: 702rpx;
		height: 88rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		color: #fff;
		margin: 70rpx auto;
	}
	.buy{
		width: 136rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		background: #2A96EE;
		border-radius: 34rpx;
		color: #fff;
	}
</style>
